<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>内容管理中心-站点管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

</head>

<body>
    <div class="layui-fluid" style="background-color:white;padding:5px;">
        <div class="layui-card-header layui-form layuiadmin-card-header-auto" style="padding:5px 0 0 0;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">查询条件：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" id="searchKey" name="searchKey" placeholder="请输入编码或名称" />
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="query-submit">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="websiteTable" lay-filter="websiteTable"></table>
        </div>
    </div>
</body>

</html>
<script type="text/html" id="status">
    {{# if(d.DelFlag ==1) { }}
    <span style="color:orangered">已停用</span>
    {{# } else {}}
    <span style="color:cadetblue"> 已启用</span>
    {{# }}}
</script>
<script type="text/html" id="baradd">
    <a class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
</script>
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-normal layui-btn-xs"
        lay-event="preview"><i class="layui-icon layui-icon-website"></i>预览</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <!-- <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="template"><i
        class="layui-icon layui-icon-template-1"></i>模板维护</a> -->
    <!--  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="relemp"><i class="layui-icon layui-icon-vercode"></i>授权人员</a> -->
    {{# if(d.DelFlag==0){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enstatus"><i
        class="layui-icon layui-extend-stop"></i>停用</a>
    {{# } else { }}
    <a class="layui-btn layui-btn-normal layui-btn-xs"
        lay-event="enstatus"><i class="layui-icon layui-icon-ok"></i>启用</a>
    {{# } }}
</script>
<script>
    lobsterlayui.main(['index', 'layer', 'form', 'element', 'table'],{
		data: {
			$layui: null,
			tableins: null,
		},
		pageload: function (right) {
			console.log(right);
			var self = this;
            self.listLoad();
            self.pageEvent();
		},
        //加载列表数据
            listLoad: function () {
                var self = this;
                var searchKey = $("#searchKey").val();
                self.data.tableins = layui.table.render({
                    elem: "#websiteTable",
                    headers: lobsterlayui.GetHeaderData(),
                    where: {
                        searchstr: searchKey
                    },
                    toolbar: '#baradd',
                    url: lobsterlayui.GetLowCodeUrl("tsAdmin.getwebsitelist"),
                    height: 'full-105',
                    size: '10',
                    page: true, //开启分页
                    cols: [[
                        { field: 'WebsiteId', title: '站点ID', align: 'center', width: '80' },
                        { field: 'WebsiteCode', title: '站点编码', align: 'center', width: '100' },
                        { field: 'Title', title: '站点标题', align: 'left', width: '180' },
                        { field: 'Keywords', title: '站点关键字', align: 'left', width: '220' },
                        { field: 'Memo', title: '站点描述', align: 'left', width: '220' },
                        { field: 'DelFlag', title: '状态', align: 'center', templet: "#status", width: '80' },
                        { field: 'CreateTime', title: '创建时间', align: 'center', width: '180' },
                        { field: 'UpdateTime', title: '更新时间', align: 'center', width: '180' },
                        { title: '操作', toolbar: '#operation', width: '250', fixed: 'right' }
                    ]],
                    parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.count,
                        data: res.data.list
                    }
                }
                });
            },

            //监听事件
            pageEvent: function () {
                var self = this;
                //查询
                layui.form.on("submit(query-submit)", function (obj) {
                    self.listLoad();
                });
                // 监听表头工具栏
                layui.table.on("toolbar(websiteTable)", function (obj) {
                    if (obj.event == "add") {
                        self.add();
                    }
                });
                //监听按钮事件
                layui.table.on('tool(websiteTable)', function (obj) {
                    var data = obj.data;//当前行数据
                    var layEvent = obj.event;//获得lay-event的值
                    switch (layEvent) {
                        case 'edit':
                            self.edit(data);
                            break;
                        case 'preview':
                            self.preview(data);
                            break;
                        case 'enstatus':
                            self.setStatus(data);
                            break;
                    }

                });
            },

            /**
             * 编辑
             * @param {any} data
             */
            edit: function (data) {
                var self = this;
                layer.open({
                    type: 2
                    , title: '编辑站点'
                    , btn: ['保存', '取消']
                    , content: 'add.html?appid='+lobsterlayui.GetAppId()
                    , area: ['70%', '90%']  //宽，高
                    , success: function (layero, index) {
                        setTimeout(function () {
                            var othis = layero.find('iframe').contents().find("#formWebsite");
                            othis.find('#websiteId').val(data.WebsiteId);
                            othis.find('#websiteCode').val(data.WebsiteCode);
                            othis.find('#url').val(data.Url);
                            othis.find('#title').val(data.Title);
                            othis.find('#keywords').val(data.Keywords);
                            othis.find('#memo').val(data.Memo);
                            othis.find("#websiteCode").attr("disabled", true);
                        }, 300)
                    }
                    , cancel: function (index, layero) {
                        layer.close(index);
                    }
                    , yes: function (index, layero) {

                        var iframeWindow = window['layui-layer-iframe' + index],
                            submitID = 'LAY-website-front-submit',
                            submit = layero.find('iframe').contents().find('#' + submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段
                            layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                            self.save(field, () => {
                                self.listLoad();
                                layer.close(index);
                            })
                        });
                        submit.trigger('click');
                    }
                });
            },

            /**
             * 添加
             * */
            add: function () {
                var self = this;
                layer.open({
                    type: 2
                    , title: '新增站点'
                    , btn: ['保存', '取消']
                    , content: 'add.html?appid='+lobsterlayui.GetAppId()
                    , area: ['70%', '90%']  //宽，高
                    , cancel: function (index, layero) {
                        layer.close(index);
                    }
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index],
                            submitID = 'LAY-website-front-submit',
                            submit = layero.find('iframe').contents().find('#' + submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段
                            layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                            self.save(field, () => {
                                self.listLoad();
                                layer.close(index);
                            })
                        });
                        submit.trigger('click');
                    }
                });
            },

            /**
             * 启用停用
             * @param {any} data
             */
            setStatus: function (data) {
                var self = this;
                var confirm_msg = "";
                var status = 0;
                if (data.DelFlag == 0) {
                    confirm_msg = "确定停用?";
                    status = 1;
                }
                else {
                    confirm_msg = "确认启用?";
                    status = 0;
                }
                layer.confirm(confirm_msg, { icon: 3, title: "提示" },
                    function (index) {
                        lobsterlayui.GETAPI('tsAdmin.setwebsitestatus',{websiteId: data.WebsiteId,delFlag: status}).then(retdata=>{
                            layer.close(index);
                            layer.msg("操作成功");
                            self.listLoad();
                        })
                    });
            },
            /**
                    * 维护模板
                    * 
                    * */
            settmplate: function (data) {
                var self = this;
                window.currentdata = data;
                layer.open({
                    type: 2
                    , title: '模板维护'
                    //, btn: ['保存', '取消']
                    , content: 'template.html'
                    , area: ['100%', '100%']  //宽，高
                    , success: function (layero, index) {

                    }
                    , cancel: function (index, layero) {
                        layer.close(index);
                    }
                    , yes: function (index, layero) {


                    }
                });
            },
            //保存
            save: function (data, succ) {
                var self = this;
                lobsterlayui.POSTAPI('tsAdmin.savewebsite',data).then(retdata=>{
                    succ && succ();
                    layer.msg("保存成功!")
                })
                
            },
            preview:function(data){
                window.open("/weuiapp/"+lobsterlayui.GetAppId()+"/template/v1/index.html?workId="+data.WorkId+"&websiteId="+data.WebsiteId);
            } 
    })

    
</script>